<template>
  <!-- 课表设置 -->
  <div class="mod-sys__params">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <!-- <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="state.deleteHandle()">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="courseName" label="课程名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="classTime" label="上课时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="oneDay" label="周一" header-align="center" align="center">
        <template v-slot="scope">
          <div class="see-student-box" v-if="scope.row.oneDay">
            <span>{{scope.row.oneDay}}</span>
            ——
            <span @click="clickSeeStudent(scope.row.oneDay,scope.row.oneDayStu,'周一')">查看学生</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="twoDay" label="周二" header-align="center" align="center">
        <template v-slot="scope">
          <div class="see-student-box" v-if="scope.row.twoDay">
            <span>{{scope.row.twoDay}}</span>
            ——
            <span @click="clickSeeStudent(scope.row.twoDay,scope.row.twoDayStu,'周二')">查看学生</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="threeDay" label="周三" header-align="center" align="center">
        <template v-slot="scope">
          <div class="see-student-box" v-if="scope.row.threeDay">
            <span>{{scope.row.threeDay}}</span>
            ——
            <span @click="clickSeeStudent(scope.row.threeDay,scope.row.threeDayStu,'周三')">查看学生</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="fourDay" label="周四" header-align="center" align="center">
        <template v-slot="scope">
          <div class="see-student-box" v-if="scope.row.fourDay">
            <span>{{scope.row.fourDay}}</span>
            ——
            <span @click="clickSeeStudent(scope.row.fourDay,scope.row.fourDayStu,'周四')">查看学生</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="fiveDay" label="周五" header-align="center" align="center">
        <template v-slot="scope">
          <div class="see-student-box" v-if="scope.row.fiveDay">
            <span>{{scope.row.fiveDay}}</span>
            ——
            <span @click="clickSeeStudent(scope.row.fiveDay,scope.row.fiveDayStu,'周五')">查看学生</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sixDay" label="周六" header-align="center" align="center">
        <template v-slot="scope">
          <div class="see-student-box" v-if="scope.row.sixDay">
            <span>{{scope.row.sixDay}}</span>
            ——
            <span @click="clickSeeStudent(scope.row.sixDay,scope.row.sixDayStu,'周六')">查看学生</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sevenDay" label="周日" header-align="center" align="center">
        <template v-slot="scope">
          <div class="see-student-box" v-if="scope.row.sevenDay">
            <span>{{scope.row.sevenDay}}</span>
            ——
            <span @click="clickSeeStudent(scope.row.sevenDay,scope.row.sevenDayStu,'周日')">查看学生</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="primary" link @click="state.deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="state.total" :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>

    <el-dialog v-model="seeStudentVisible" :title="seeStudentTitle" :close-on-click-modal="false" :close-on-press-escape="false" width="600px">
      <el-descriptions title="" direction="vertical" :column="2" :size="size" border>
        <el-descriptions-item width="100" label="上课教师">{{seeStudentTeacher}}</el-descriptions-item>
        <el-descriptions-item label="上课学生">
          <el-tag size="small" style="margin:5px;" v-for="(item,index) in studentList" :key="index">{{item.realName}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template v-slot:footer>
        <el-button type="primary" @click="seeStudentVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./curriculum-add-or-update.vue";
import baseService from "@/service/baseService";

const view = reactive({
  getDataListURL: "/lingyao/coursetableday/getCourseTableDatas",
  getDataListIsPage: false,
  deleteURL: "/lingyao/coursetableday",
  deleteIsBatch: true
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

const seeStudentVisible = ref(false);
const seeStudentTitle = ref("");
const seeStudentTeacher = ref("");
const studentList = ref([]);

// 查看学生
const clickSeeStudent = (teacherName: string, studentIds: any, date: string) => {
  seeStudentVisible.value = true;
  seeStudentTeacher.value = teacherName;
  seeStudentTitle.value = date;
  if (studentIds && studentIds.length > 0) {
    baseService.post(`/lingyao/coursetableday/getStuByIds`, studentIds.split(",")).then((res) => {
      studentList.value = res.data;
    });
  } else {
    seeStudentVisible.value = true;
    studentList.value = [];
  }
};
</script>


<style lang="less" scoped>
.see-student-box {
  display: flex;
  align-items: center;
  flex-direction: column;

  span {
    white-space: nowrap;
  }

  span:last-child {
    cursor: pointer;
  }
}
</style>